<template>
	<div class="main">
		<ul>
			<li v-for="item in lists" :key="item.id">
				<div class="item">
					<img :src="require('@/'+item.src)" >
					<label>{{item.title}}</label>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name:'Icons',
		data(){
			return {
				lists:[
					{id:1, title:'周边游', src:'assets/img/1.png', url:'/'},
					{id:2, title:'国内游', src:'assets/img/2.png',url:'/'},
					{id:3, title:'出境游', src:'assets/img/3.png',url:'/'},
					{id:4, title:'自由行', src:'assets/img/4.png',url:'/'},
					{id:5, title:'酒店民宿', src:'assets/img/5.png',url:'/'},
				]
			}
		}
	}
</script>

<style scoped>
	.main{
		width: 95%;
		overflow: hidden;
		margin: 0.8rem auto 0;
	}
	ul{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	ul li{
		text-align: center;
		width: 20%;
	}
	ul li .item{
		flex-direction: column;
	}
	.item img{
		width: 70%;
		padding: 0 15%;
	}
</style>
